<template>
    <div class="outBox">
        <div class="header-nav">
        <div v-for="(item,index) in navItem" :key="item.index" :class="[{'active':index===currentActive},{'item':true}]"
            @click="changeActive(index,item,$event)">
            <i :class="item.icon" style="margin-right:2px"></i>{{item.name}}
        </div>
    </div>
        <div class="mover" :style="[{left:locationLeft}]"></div>
    </div>
</template>

<script>
    export default {
        props:{
            navItem:{
                type:Array,
                default:[{name:"暂无数据"}]
            }
        },
        data() {
            return {
                currentActive: 0,
                locationLeft:`5%`
            }
        },
        methods: {
            changeActive(index,item,event) {
                this.locationLeft = `calc(${event.target.offsetLeft}px + 5%)`
                this.currentActive = index
                this.$emit("currentInfo",item)
            }
        }
    }
</script>

<style lang="less" scoped>
.outBox{
    position: relative;
.header-nav {
        display: flex;
        height: 50px;
        .active {
            color:tomato;
            transition: all 0.3s;
        }
        .item {
            flex: 1;
            text-align: center;
            line-height: 50px;
            &:hover{
                background-color: rgba(255, 255, 255, 0.3);
            }
        }
    }
    .mover{
        z-index: -1;
        border-radius: 30px;
        position: absolute;
        width: 15%;
        height: 40px;
        left: 0;
        background-color: rgba(255, 255, 255, 0.3);
        top: 5px;
        transition: left 0.5s ease-in-out;
    }
}
    
</style>